<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏大厅</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/game_hall.css">

</head>
<body>
<div class="nav">欢乐五子棋</div>

<div class="container">
<!--  这个div 在container中是处于垂直水平居中的位置-->
<div>
<!--  展示用户信息-->
    <div id="screen"></div>
<!--  匹配按钮-->
    <div id="match-button">开始匹配</div>

</div>
</div>


<script src="js/jquery.min.js"></script>

<script>
    $.ajax({
        type: 'get',
        url: 'userInfo',
        success: function (body) {
            let screenDiv = document.querySelector('#screen');
            screenDiv.innerHTML = '玩家: ' + body.username + " 天梯分数: " + body.score
            + "<br> 比赛场次: " + body.totalCount + " 获胜场数: " + body.winCount

        },
        error: function () {
            alert("获取用户信息失败！！");
        }


    });

    // 此处进行初始化 websocket,并且实现前端的逻辑匹配
    let websocket = new WebSocket('ws://127.0.0.1:8080/findMatch');
    websocket.onopen = function () {
        console.log("onopen");
    }
    websocket.onclose = function () {
        console.log("onclose");
    }
    websocket.onerror = function () {
        console.log("onerror");
    }
    // 监听页面关闭事件 在页面关闭之前，手动调用这里的websocket的close方法
    window.onbeforeunload = function () {
        websocket.close();

    }
    // 要处理服务器返回的响应

    websocket.onmessage = function (e) {
    // 处理服务器返回的响应数据，这个数据就是针对"开始匹配" / "结束匹配" 来对应的
    // 解析得到的响应对象 返回的数据是一个JSON 字符串 解析成js 对象
        let resp = JSON.parse(e.data); // JSON字符串转化成 JS 对象
        let matchButton = document.querySelector('#match-button');
        if (!resp.ok) {
            console.log("游戏大厅中收到了失败响应!" + resp.reason);
            return;
        }
        if(resp.message == 'startMatch') {
            // 开始匹配请求发送成功
            console.log("进入匹配队列成功!");
            matchButton.innerHTML = '匹配中...(点击停止)'
        } else if (resp.message == 'stopMatch') {
            // 结束匹配请求发送成功
            console.log("离开匹配成功!");
            matchButton.innerHTML = '开始匹配';
        } else if (resp.message =='matchSuccess') {
            // 已经匹配得到对手了
            console.log("匹配到对手! 进入到游戏房间");
            location.replace("/game_room.html");

        } else if (resp.message == 'repeatConnection'){
            alert("当前检测到多开！请使用其他账户进行登录！");
            location.replace("/login.html");
        } else {
            console.log("收到了非法的响应! message=" + resp.message);
        }

    }

    // 给匹配按钮添加一个点击事件
    let matchButton = document.querySelector('#match-button');
    matchButton.onclick = function () {
        // 在触发websocket 请求之前 先确认下websocket 连接是否是好的~
        if (websocket.readyState == websocket.OPEN) {
            // 如果当前 readyState 处在OPEN状态, 说明连接是好的
            // 这里发送的数据有两种可能 开始匹配/停止匹配
            if (matchButton.innerHTML == '开始匹配') {
                console.log("开始匹配");
                websocket.send(JSON.stringify({
                    // JS对象转化成 JSON字符串
                        message: 'startMatch',
            }));
            } else if (matchButton.innerHTML == '匹配中...(点击停止)') {
                console.log('停止匹配');
                websocket.send(JSON.stringify({
                    message: 'stopMatch',
                }));
            }
        } else {
            // 这是说明连接处于异常状态
            alert("当前您的连接已经断开!! 请重新登录！");
            location.replace('/login.html');


        }
    }


</script>

</body>
</html>